<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>地震局培训平台</title>
	<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />-->
	<link rel="stylesheet" href="style/main.css" />
	<link rel="stylesheet" href="style/index.css" />
</head>

<body>
	<div id="info">
		<div class="info">
			<div class="newsbox">
				<!--消息滚动-->
				<div class="news nowrap">消息：欢迎加入地震应急志愿者培训平台，您是第123456位访问用户。</div>
			</div>
			<div class="infobox">
				<div class="name nowrap">zhangming</div>
				<div class="info_id nowrap">N.8784547</div>
				<div class="sign_out">退出</div>
			</div>
			<div class="leave_m">互动留言</div>
		</div>
	</div>
	<!--<div id="window"></div>-->
	<div id="show">
		<nav id="nav">
			<div class="top">
				<div class="logo"></div>
				<div class="seachbox">
					<input type="text" id="search" value="在线课堂搜索" />
					<div class="weibo codeIcon">
						<div class="first">
							<img src="image/weiboCode.png" />
						</div>
					</div>
					<div class="weixin codeIcon">
						<div class="first">
							<img src="image/weixinCode.png" />
						</div>
					</div>
				</div>
			</div>
			<div class="border">
				<ul class="nav">
					<li class="in">首页</li>
					<li data-url="news">新闻资讯</li>
					<!--<li data-url="story">志愿故事</li>-->
					<li class="team">志愿品牌
						<div class="first">
							<div class="in" data-url="story">志愿故事</div>
							<div data-url="team">志愿团体</div>
							<div data-url="star">志愿之星</div>
						</div>
					</li>
					<!--<li data-url="project">志愿项目</li>
						<li data-url="star">志愿之星</li>-->
					<li data-url="train">培训平台</li>
					<li data-url="policy">志愿政策</li>
				</ul>
			</div>

		</nav>
		<div id="banner">
			<div class="text1"></div>
			<div class="text2"></div>
			<div class="menubox">
				<div class="menu menu1 in" data-url="lecturer.html"></div>
				<div class="menu menu2" data-url="project.html"></div>
				<div class="menu menu3" data-url="help.html"></div>
				<div class="menu menu4" data-url="apply.html"></div>
			</div>
			<div class="dotbox">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
		<div id="news">
			<div class="title"></div>
			<div class="more" data-url="news.html">更多资讯 >></div>
			<div class="border"></div>
			<div class="left" id="news_left">
				<!--<div class="h_enterbtn"></div>-->
			</div>
			<ul class="list" id="lists">
				<!-- <li class="messages">
					<div class="text nowrap">云南省昭通市召开2018年度防震减灾工作会议 </div>
					<div class="time">[2018-04-10]</div>
				</li>
				<li class="messages">
					<div class="text nowrap">云南省昭通市召开2018年度防震减灾工作会议 </div>
					<div class="time">[2018-04-10]</div>
				</li>
				<li class="messages">
					<div class="text nowrap">广西贵港市防震减灾工作领导小组贵港市地震局举办贵港市2018年防办贵港市2018年防</div>
					<div class="time">[2018-04-09]</div>
				</li>
				<li class="messages">
					<div class="text">河北省抗震救灾指挥部办公室推动做好全省地震应急工作检查</div>
					<div class="time">[2018-04-09]</div>
				</li>
				<li class="messages">
					<div class="text nowrap">重庆市地震局专家赴荣昌区检查盘龙台标准化试点改造施工情况</div>
					<div class="time">[2018-04-09]</div>
				</li>
				<li class="messages">
					<div class="text nowrap">福建省晋江市地震办开展公民道德建设宣传月活动</div>
					<div class="time">[2018-04-07]</div>
				</li>
				<li class="messages">
					<div class="text nowrap">福建省连城县地震办到四堡中心小学开展防震减灾知识宣传活动 </div>
					<div class="time">[2018-04-07]</div>
				</li> -->
			</ul>
			<div id="banner2">
				<div class="banner">
					<div class="pic" id="news_a" data-url="train.html?first=1&second=1"></div>
					<div class="pic" id="news_b"></div>
					<!-- <div class="pic"></div>
					<div class="pic"></div> -->
				</div>
				<div class="picBtn">
					<div class="btn1 dot"></div>
					<div class="btn2 dot"></div>
					<!-- <div class="btn3 dot"></div>
					<div class="btn4 dot"></div> -->
				</div>
			</div>
		</div>
		<div id="story">
			<div class="title"></div>
			<ul class="list">
				<li data-list="1">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌1</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="2">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌2</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="3">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌3</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="4">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌4</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="5">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌5</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="1">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌6</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="2">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌7</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="3">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌8</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="4">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌9</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
				<li data-list="5">
					<div class="img"></div>
					<div class="opcity"></div>
					<div class="text">
						<p class="title">封面人物:孙萌萌10</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社11</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>
					</div>
				</li>
			</ul>
			<div class="click">
				<div class="img"></div>
				<div class="text">
					<!--<p class="title">封面人物:孙萌萌</p>
						<p>职业:大四学生</p>
						<p>志愿团体：北大校园爱心公社</p>
						<p>志愿故事：在五一国际劳动节来临之际为这群特殊的孩子们上演一次生活技能达人秀。顺义区特殊教育学校是一所集</p>-->
				</div>
			</div>
		</div>
		<div id="project">
			<div class="title"></div>
			<div class="more" data-url="project.html">更多项目 >></div>
			<div class="border"></div>
			<div class="list">
				<div class="btns">
					<div class="in">招募中</div>
					<div class="">进行中</div>
					<div class="">已结束</div>
				</div>
				<div class="content in">
					<div class="box">
						<div class="img">
							<div class="title">“小当家，大未来 - 社区安全讲座”志愿服务1</div>
						</div>
						<div class="left">
							<div class="address">活动地点：海淀区</div>
							<div class="leader">发起组织：北京市地震局 宣传办</div>
							<div class="time">报名时间：2018-04-30截止</div>
						</div>
						<div class="addbtn">立即
							<br />报名</div>
						<div class="bottom">
							<div class="number">12000人参加</div>
							<div class="like">2466人有兴趣</div>
							<div class="share">分享</div>
						</div>
					</div>
					<div class="box">
						<div class="img">
							<div class="title">“小当家，大未来 - 社区安全讲座”志愿服务1</div>
						</div>
						<div class="left">
							<div class="address">活动地点：海淀区</div>
							<div class="leader">发起组织：北京市地震局 宣传办</div>
							<div class="time">报名时间：2018-04-30截止</div>
						</div>
						<div class="addbtn">立即
							<br />报名</div>
						<div class="bottom">
							<div class="number">12000人参加</div>
							<div class="like in">2466人有兴趣</div>
							<div class="share">分享</div>
						</div>
					</div>
				</div>
				<div class="content">
					<div class="box">
						<div class="img">
							<div class="title">“小当家，大未来 - 社区安全讲座”志愿服务2</div>
						</div>
						<div class="left">
							<div class="address">活动地点：海淀区</div>
							<div class="leader">发起组织：北京市地震局 宣传办</div>
							<div class="time">报名时间：2018-04-30截止</div>
						</div>
						<div class="addbtn">立即
							<br />报名</div>
						<div class="bottom">
							<div class="number">12000人参加</div>
							<div class="like">2466人有兴趣</div>
							<div class="share">分享</div>
						</div>
					</div>
					<div class="box">
						<div class="img">
							<div class="title">“小当家，大未来 - 社区安全讲座”志愿服务2</div>
						</div>
						<div class="left">
							<div class="address">活动地点：海淀区</div>
							<div class="leader">发起组织：北京市地震局 宣传办</div>
							<div class="time">报名时间：2018-04-30截止</div>
						</div>
						<div class="addbtn">立即
							<br />报名</div>
						<div class="bottom">
							<div class="number">12000人参加</div>
							<div class="like in">2466人有兴趣</div>
							<div class="share">分享</div>
						</div>
					</div>
				</div>
				<div class="content">
					<div class="box">
						<div class="img">
							<div class="title">“小当家，大未来 - 社区安全讲座”志愿服务3</div>
						</div>
						<div class="left">
							<div class="address">活动地点：海淀区</div>
							<div class="leader">发起组织：北京市地震局 宣传办</div>
							<div class="time">报名时间：2018-04-30截止</div>
						</div>
						<div class="addbtn">立即
							<br />报名</div>
						<div class="bottom">
							<div class="number">12000人参加</div>
							<div class="like">2466人有兴趣</div>
							<div class="share">分享</div>
						</div>
					</div>
					<div class="box">
						<div class="img">
							<div class="title">“小当家，大未来 - 社区安全讲座”志愿服务3</div>
						</div>
						<div class="left">
							<div class="address">活动地点：海淀区</div>
							<div class="leader">发起组织：北京市地震局 宣传办</div>
							<div class="time">报名时间：2018-04-30截止</div>
						</div>
						<div class="addbtn">立即
							<br />报名</div>
						<div class="bottom">
							<div class="number">12000人参加</div>
							<div class="like in">2466人有兴趣</div>
							<div class="share">分享</div>
						</div>
					</div>
				</div>
				<div class="pagebox">
					<div class="page">
						<div>1</div>
						<div>2</div>
						<div>3</div>
					</div>
				</div>
			</div>
			<div class="addbox">
				<div class="text1">开启你的志愿服务之旅</div>
				<div class="text2">OPEN YOUR VOLUNTEER SERVICE</div>
				<div class="redheart"></div>
				<p class="text">招募志愿者，壮大志愿者服务影响力</p>
				<p class="text">多个组织、多地区分布，不同成员人数</p>
				<p class="text">快速加入 开始你的志愿服务之旅！</p>
				<div class="addbtn">加入志愿组织</div>
			</div>
		</div>
		<div id="star">
			<div class="border"></div>
			<div class="title"></div>
			<div class="more" data-url="lecturer.html">更多 >></div>
			<div class="text">Lecturer's demeanor</div>
			<div class="list">
				<div class="box">
					<div class="head"></div>
					<div class="name">邹文卫</div>
					<div class="grade">培训讲师</div>
				</div>
				<div class="box">
					<div class="head"></div>
					<div class="name">王波</div>
					<div class="grade">培训讲师</div>
				</div>
				<div class="box">
					<div class="head"></div>
					<div class="name">刘亚华</div>
					<div class="grade">培训讲师</div>
				</div>
				<div class="box">
					<div class="head"></div>
					<div class="name">曹开</div>
					<div class="grade">培训讲师</div>
				</div>
				<div class="box">
					<div class="head"></div>
					<div class="name">张宏宇</div>
					<div class="grade">培训讲师</div>
				</div>
			</div>
		</div>
		<div id="policy">
			<div class="title"></div>
			<div class="border"></div>
			<div class="more" data-url="policy.html">更多 >></div>
			<ul class="left">
				<li>
					<span class="nowrap">关于印发《关于加强中学生志愿服务工作的实施意见》的通知</span>
				</li>
				<li>
					<span class="nowrap">教育部关于印发《学生志愿服务管理暂行办法》的通知</span>
				</li>
				<li>
					<span class="nowrap">共青团中央关于印发《关于推动团员成为注册志愿者的意见》的通知</span>
				</li>
			</ul>
			<ul class="right">
				<li>
					<span class="nowrap">关于印发《关于加强中学生志愿服务工作的实施意见》的通知</span>
				</li>
				<li>
					<span class="nowrap">教育部关于印发《学生志愿服务管理暂行办法》的通知</span>
				</li>
				<li>
					<span class="nowrap">共青团中央关于印发《关于推动团员成为注册志愿者的意见》的通知</span>
				</li>
			</ul>
		</div>
		<!--<div id="train">
				<div class="title"></div>
				<div class="border"></div>
				<div class="morebox">
					<div class="more in"><span>志愿者大讲堂</span></div>
					<div class="more"><span>岗位培训</span></div>
					<div class="more"><span>专业课程</span></div>
					<div class="more"><span>在线考试</span></div>
				</div>
				<div class="textbox">
					<p class="text1">本周讲堂：志愿者心理调适与自护</p>
					<p class="text2">讲堂内容：讲述如何克服调整遇到的心理问题</p>
					<p class="text2">一、管理者通过对志愿者的工作设置调整、对志愿者的培养来帮助志愿者</p>
					<p class="text2">二、团队互动的调适：团队的持续沟通、积极赋义法、按摩阵线联盟法</p>
					<p class="text2">三、自愿者自身的自我调适：</p>
					<p class="text3">（1）如何克服紧张：</p>
					<p class="text3">（2）如何应对工作倦怠的方法 </p>
					<div class="moretext">更多课程 >></div>
				</div>
				<div class="video">
					<video id="video" src="video/video.mp4"></video>
					<div class="videobg"></div>
					<div class="playbtn"></div>
				</div>
			</div>-->
	</div>
	<div id="bottom">
		<ul class="border">
			<li>相关协作单位：</li>
			<li data-url="http://www.bv2008.cn/index.php">志愿北京</li>
			<li data-url="http://www.psych.ac.cn/">中科院心理所</li>
			<li data-url="http://www.bjdzj.gov.cn/">北京地震局官方网站</li>
			<li data-url="http://dsm.besn.org.cn/">地震数字科普馆</li>
			<li data-url="http://besn.org.cn/">北京市防震减灾科普网 </li>
			<li data-url="https://new.crcf.org.cn/">中国红十字会基金会</li>
		</ul>
		<div class="bottom">
			<ul class="one">
				<li>设为首页</li>
				<li>交换链接</li>
				<li>关于我们</li>
				<li>联系我们</li>
				<li>常见问题</li>
				<li>心理教室</li>
				<li>党团建设</li>
			</ul>
			<ul class="two">
				<li>主办：北京市地震局</li>
				<li>版权所有 京ICP备08988239</li>
				<li>技术支持：中宣助力传媒</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="script/jquery.min.js"></script>
	<script type="text/javascript" src="script/ishoock.tools.js"></script>
	<script type="text/javascript" src="script/main.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<script>
		var index = 1, index2 = 1,
			pre, num, timer, pre2, timer2;
		var play = true, play2 = true;
		var a = $("#project .list .content");
		var b = $("#project .list .pagebox .page").children();
		var a2 = $("#banner2 .banner").children();
		var b2 = $("#banner2 .picBtn").children();
		
		$(function () {
			Run2();
		Run();
		getNewsInfo();//获取新闻资讯列表
			//点击"点击进入"按钮
			$("#news_left").on("click", function () {
				window.location.href = "bigLecturers.html";
			});

			$("#news_a").on("click", function () {
				window.location.href = "train.html";
			});

			$("#news_b").on("click", function () {
				window.location.href = "policys.html";
			});
			
			//点击底部合作单位
			$("#bottom ul.border>li").on("click",function(){
				if($(this).attr("data-url")!==""){
					window.location.href=$(this).attr("data-url");
				}
			});
			
			//点击更多按钮
			$(".more").on("click",function(){
				window.location.href=$(this).attr("data-url");
			});
			
			//点击小banner跳转到培训页面且是学习导航下的医疗救护
			$("#banner2 .pic").on("click",function(){
				window.location=$(this).attr("data-url");
			})
			
			

//			$.ajax({
//				type: "GET",
//				url: "http://101.201.113.151:9230/news/getNewsInfo?newsType=0&pageSize=4&page=1",//访问的链接
//				dataType: "json",  //数据格式设置为jsonp
//				// jsonp:"callback",
//				async: true,
//				success: function (data) {  //成功的回调函数
//					console.log(data);
//
//					// var ss = s.substr(12); // 获取子字符串, 从下表12开始, 截取5个字符
//					// console.log(ss);
//					
//				},
//				error: function (e) {
//				}
//			});

			$("#news .list>li").on("mouseover", function () {
				$(this).in();
			});
			$("#news .list>li").on("mouseleave", function () {
				$("#news .list>li").removeIn();
			});
			$("#nav .nav .first>div").on("click", function () {
				$("#nav .nav .first>div").removeClass("in");
				$(this).addClass("in");
			});
			//				$("#banner .menu").on("mouseover", function() {
			//					$(this).siblings().removeIn();
			//					$(this).in();
			//				});
			//				$("#banner .menu").on("click", function() {
			//					$(this).in();
			//					$(this).siblings().removeIn();
			//				});
			$("#banner .text1").in();
			$("#banner .text2").in();
			$("#banner .menubox").in();

			$("#banner .menu").on("click", function () {
				window.location.href = $(this).attr("data-url");
			});
			$("#project .btns>div").on("click", function () {
				$(this).in();
				$(this).siblings().removeIn();
			});
			$("#project .page>div").on("click", function () {
				$(this).in();
				$(this).siblings().removeIn();

				if (index == 0) {
					pre = a.length - 1;
				} else {
					pre = index - 1;
				}
				index = $(event.target).index();
				play = false;
				Run();
			});
			$("#story li").on("mouseover", function () {
				$("#story .click").removeClass("in1 in2 in3 in4 in5");
				var list = $(this).attr("data-list");
				$("#story .click .text").html($(this).children(".text").html());
				$("#story .click .img").css("background-image", "url(image/head" + ($(this).index() + 1) + ".jpg)");
				$("#story .click").in();
				$("#story .click").addClass("in" + list);
				//					over2=2;
			});
			$("#star .list .box").on("mouseover", function () {
				$(this).in();
			});
			$("#star .list .box").on("mouseleave", function () {
				$("#star .list .box").removeIn();
			});
			$("#policy ul li").on("mouseover", function () {
				$(this).in();
			});
			$("#policy ul li").on("mouseleave", function () {
				$("#policy ul li").removeIn();
			});
			$("#train .playbtn").on("click", function () {
				$("#video")[0].play();
				$("#train .videobg").hide();
				$("#train .playbtn").hide();
				$("#video").on("ended", function () {
					$("#train .videobg").show();
					$("#train .playbtn").show();
				});
			});
		});
		
		
		function getNewsInfo(){
			$("#news ul.list").empty();
				$.get("http://101.201.113.151:9230/news/getNewsInfo",{
					title:"",
					newsType:27,
					pageSize:4,
					page:1
				},function(data){
					console.log(data.result)
					for (var i = 0; i < data.result.length; i++) {
						var createDate = data.result[i].createDate.substr(0, 10);
						var item =
							'<li class="messages">' +
							'<input type="hidden" value="'+data.result[i].id+'" class="Id">'+
							'<div class="text nowrap">' + data.result[i].title + '</div>' +
							'<div class="time">' + '[' + createDate + ']' + '</div>' +
							'</li>';
						$("#news ul.list").append(item);
//						$(".box").data("result", data.result);
					}
					
					$(".messages").on("click", function () {
						var Id = $(this).children('.Id').val();
						window.location.href = "details.html?id="+Id;
					});
				})
			}

		function Run() {
			clearTimeout(timer);
			if (a.eq(index).hasClass("in1") || a.eq(index).hasClass("in2") || a.eq(index).hasClass("out1") || a.eq(index).hasClass("out2")) {
				a.eq(index).removeClass("in1 in2 out1 out2");
			}
			if (play) {
				//index
				if (index < a.length) {
					if (index == 0) {
						pre = a.length - 1;
					} else {
						pre = index - 1;
					}
					a.eq(pre).removeClass("in1 in2 out1,out2");
					a.eq(index).addClass("in1");
					a.eq(pre).addClass("in2");
				}
			} else {
				if (pre < index) {
					a.eq(pre).removeClass("in1 in2 out1,out2");
					a.eq(index).addClass("in1");
					a.eq(pre).addClass("in2");
				} else {
					a.eq(pre).removeClass("in1 in2 out1,out2");
					a.eq(index).addClass("out1");
					a.eq(pre).addClass("out2");
				}
			}

			b.eq(index).addClass("in");
			b.eq(pre).removeClass("in");
			if (index == a.length - 1) {
				pre = index;
				index = 0;
			} else {
				index = index + 1;
				pre = index - 1;
			}
			play = true;
		}


	</script>
</body>

</html>